import React, { Component } from 'react';

import {BrowserRouter as Router,Route,Link,NavLink,Redirect,withRouter} from "react-router-dom";
// import { HashRouter as Router, Route, Link, Redirect} from "react-router-dom";
import history from './history.js'

import { Carousel, Row, Col ,Card, Badge, Icon, Input, Button } from 'antd';


// 导入路由配置组件
// import RouterMap from './RouterMap'

//导入相关子组件
import Home from './components/home/Home';
import Login from './components/login/Login';
import Reg from './components/reg/Reg';
import About from './components/about/About';
import Movie from './components/movie/Movie';

import MovieSearch from './components/MovieSearch'


//全局导入axios
import $http from 'axios'

// import logo from './logo.svg';
import './App.less';

//根组件
class App extends Component {
  constructor(props){
    super(props);
    //初始化state状态
    this.state={
      title:"hello",
      welcome:'欢迎使用react',
      navlist:[
          {
            title:'首页',
            url:'/home',
            icon:'home'
          },
          {
            title:'正在热映',
            url:'/movielist'
          },
          {
            title:'即将上映',
            url:'/booklist'
          },
          {
            title:'top250',
            url:'/booklist'
          },
          {
            title:'北美票房榜',
            url:'/booklist'
          },
          {
            title:'图书推荐',
            url:'/booklist'
          },
          {
            title:'关于',
            url:'/about'
          },{
            title:'登录',
            url:'/login'
          },
          {
            title:'注册',
            url:'/reg'
          }
      ],
      slides:[],
      newList:[],
      happyList:[],
      loveList:[]
    }
  }

  componentWillMount(){ 
    
     $http.get('/mock/carousel.json').then((res)=>{
      
      this.setState({
        slides:res.data.subjects
      });

    })


    var url1="/mock/movie/index_new.json";
    $http.get(url1).then((res)=>{
    
      this.setState({
        newList:res.data.subjects
      }); 

    }).then(()=>{
        var url2="/mock/movie/index_happy.json";
        $http.get(url2).then((res)=>{
          this.setState({
            happyList:res.data.subjects
          }); 
          // console.log(this.state.happyList);
        })
    })


  }

  movieSearchHandle(event){
    if(event.keyCode==13){
      var keywords=event.target.value.trim();
      if(keywords!=''){
          // console.log(event.target.value);
          var path='/login';
          history.push(path);
          // console.dir(history)
      }
    }
  }


  render() {
    return (
      <Router>
        <div>
            {/*导航条*/}
            
              <ul className="nav">
                  {
                    this.state.navlist.map(function(item,index){
                        return <li key={index}>
                        <NavLink to={item.url} activeClassName="active">
                        {item.icon?<Icon type={item.icon} />:''}
                        {item.title}</NavLink>
                        </li>
                    })
                  }
              </ul>  
            
      
            <div className="container" style={{height:60}}>

              <Row>
                <Col span={6}>
                  <Input ref='keywords' placeholder="请输入关键词" size="large" onKeyUp={this.movieSearchHandle.bind(this)}/>
                </Col>
              </Row>
              
            </div> 
            {/* render={()=><Redirect to="/home"/>}*/}
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/reg" component={Reg}/>
            <Route path="/about" component={About} />
            <Route path="/movie/:id" component={Movie} />
            <Route path="/movieSearch/:keywords" component={MovieSearch} />

            <div className="footer">
                <p>前端开发版权所有&copy;2018&nbsp;&nbsp;允许侵权</p>
            </div>

        </div>

        </Router>
    );
  }
}

export default App;
